<!--
此文件为开发者工具生成，生成时间: 2023/11/29上午9:36:09
使用方法：
在 F:\star\unpackage\dist\dev\mp-weixin\pages\index\index.wxml 引入模板

```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 F:\star\unpackage\dist\dev\mp-weixin\pages\index\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
  <view class="sk-container">
    <view class="tabbar-page data-v-57280228">
      <view class="data-v-57280228">
        <view  class="data-v-57280228 vue-ref"  data-ref="home">
          <view class="big-box home--big-box flex-col home--flex-col align-center home--align-center data-v-92bb8f34 home--data-v-92bb8f34">
            <view class="nav-download home--nav-download justify-between home--justify-between align-center home--align-center data-v-92bb8f34 home--data-v-92bb8f34">
              <view class="nav-download-logo home--nav-download-logo justify-start home--justify-start align-center home--align-center data-v-92bb8f34 home--data-v-92bb8f34 sk-transparent" >
                <image mode="true" class="data-v-92bb8f34 home--data-v-92bb8f34 sk-image"></image>潮游星球APP已上线，去下载吧~</view>
              <image mode="true" class="nav-download-close home--nav-download-close data-v-92bb8f34 home--data-v-92bb8f34 sk-image" ></image>
            </view>
            <view class="banner home--banner data-v-92bb8f34 home--data-v-92bb8f34">
              <view class="u-swiper swiper--u-swiper data-v-6b019429 swiper--data-v-6b019429" style="background-color:#16161e;height:528px;border-radius:4px;">
                <swiper autoplay="false" class="u-swiper__wrapper swiper--u-swiper__wrapper data-v-6b019429 swiper--data-v-6b019429" current="0"  display-multiple-items="1" duration="300" easing-function="default" interval="3000"
                  next-margin="0px" previous-margin="0px" style="height:528px;" circular="true"></swiper>
                <view class="u-swiper__indicator swiper--u-swiper__indicator data-v-6b019429 swiper--data-v-6b019429" style="true"></view>
              </view>
              <image mode="true" class="l-banner-btn home--l-banner-btn data-v-92bb8f34 home--data-v-92bb8f34 sk-image"></image>
              <image mode="true" class="r-banner-btn home--r-banner-btn data-v-92bb8f34 home--data-v-92bb8f34 sk-image" ></image>
            </view>
            <view class="menu-box home--menu-box justify-between home--justify-between data-v-92bb8f34 home--data-v-92bb8f34">
              <view class="data-v-92bb8f34 home--data-v-92bb8f34" >
                <image mode="true" class="grid-l home--grid-l data-v-92bb8f34 home--data-v-92bb8f34 sk-image"></image>
              </view>
              <view class="flex-col home--flex-col justify-between home--justify-between data-v-92bb8f34 home--data-v-92bb8f34">
                <image mode="true" class="grid-r home--grid-r data-v-92bb8f34 home--data-v-92bb8f34 sk-image" ></image>
                <image mode="true" class="grid-r home--grid-r data-v-92bb8f34 home--data-v-92bb8f34 sk-image" ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="tabbar data-v-57280228">
        <view class="data-v-57280228 tabcli sk-transparent" >
          <image class="tabbar-icon data-v-57280228 animation sk-image"></image>首页</view>
        <view class="data-v-57280228 sk-transparent">
          <image class="tabbar-icon data-v-57280228 sk-image"></image>山海异兽</view>
        <view class="data-v-57280228 sk-transparent">
          <image class="tabbar-icon data-v-57280228 sk-image"></image>星球地图</view>
        <view class="data-v-57280228 sk-transparent" >
          <image class="tabbar-icon data-v-57280228 sk-image"></image>我的</view>
      </view>
    </view>
  </view>
</template>
<style>
	@import '/common/css/common.css';
</style>
<style scoped lang="scss">
	/*
	此文件为开发者工具生成，生成时间: 2023/11/29上午9:36:09
	
	在 F:\star\unpackage\dist\dev\mp-weixin\pages\index\index.wxss 中引入样式
	```
	@import "./index.skeleton.wxss";
	```
	
	更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
	*/
   page view {
     box-sizing: border-box;
     flex-shrink: 0;
     line-height: 1;
   }
   page {
     font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
       Arial, PingFang SC-Light, Microsoft YaHei;
     margin: 0;
   }
   .mb30{
   	position: relative;
   	margin-bottom: 30rpx;
   }
   .mb40{
   	position: relative;
   	margin-bottom: 40rpx;
   }
   .flex-col {
     display: flex;
     flex-direction: column;
   }
   .flex-row {
     display: flex;
     flex-direction: row;
   }
   .justify-start {
     display: flex;
     justify-content: flex-start;
   }
   .justify-center {
     display: flex;
     justify-content: center;
   }
   .justify-end {
     display: flex;
     justify-content: flex-end;
   }
   .justify-evenly {
     display: flex;
     justify-content: space-evenly;
   }
   .justify-around {
     display: flex;
     justify-content: space-around;
   }
   .justify-between {
     display: flex;
     justify-content: space-between;
   }
   .align-start {
     display: flex;
     align-items: flex-start;
   }
   .align-center {
     display: flex;
     align-items: center;
   }
   .align-end {
     display: flex;
     align-items: flex-end;
   }
   .flex-wrap{
   	flex-wrap: wrap;
   }
   
   @charset "UTF-8";
   /**
    * 这里是uni-app内置的常用样式变量
    *
    * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
    * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
    *
    */
   /**
    * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
    *
    * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
    */
   /* 颜色变量 */
   .border.data-v-92bb8f34 {
     border: 1rpx solid red;
   }
   /* 行为相关颜色 */
   /* 文字基本颜色 */
   /* 背景颜色 */
   /* 边框颜色 */
   /* 尺寸变量 */
   /* 文字尺寸 */
   /* 图片尺寸 */
   /* Border Radius */
   /* 水平间距 */
   /* 垂直间距 */
   /* 透明度 */
   /* 文章场景相关 */
   .big-box.data-v-92bb8f34 {
     background: #16161e;
   }
   .big-box .nav-download.data-v-92bb8f34 {
     padding: 0 34rpx;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 106rpx;
     z-index: 999999999;
     background-color: rgba(207, 227, 255, 0.19);
   }
   .big-box .nav-download .nav-download-logo.data-v-92bb8f34 {
     font-size: 30rpx;
     color: #FFF;
   }
   .big-box .nav-download .nav-download-logo image.data-v-92bb8f34 {
     width: 64rpx;
     height: 64rpx;
     border-radius: 8rpx;
     margin-right: 22rpx;
   }
   .big-box .nav-download .nav-download-close.data-v-92bb8f34 {
     width: 48rpx;
     height: 48rpx;
   }
   .big-box .menu-box.data-v-92bb8f34 {
     background: #16161e;
     width: 100%;
     padding: 0 30rpx;
     position: relative;
     z-index: 2;
   }
   .big-box .menu-box .grid-l.data-v-92bb8f34 {
     width: 340rpx;
     height: 456rpx;
   }
   .big-box .menu-box .grid-r.data-v-92bb8f34 {
     width: 326rpx;
     height: 218rpx;
   }
   .big-box .banner.data-v-92bb8f34 {
     background: #16161e;
     margin-bottom: -50rpx;
     width: 100vw;
     position: relative;
   }
   .big-box .banner .l-banner-btn.data-v-92bb8f34 {
     width: 80rpx;
     height: 80rpx;
     top: 19.4375rem;
     left: 0;
     position: absolute;
     padding: 40rpx;
     z-index: 1111;
     box-sizing: content-box;
   }
   .big-box .banner .r-banner-btn.data-v-92bb8f34 {
     width: 80rpx;
     height: 80rpx;
     top: 19.4375rem;
     right: 0;
     position: absolute;
     padding: 40rpx;
     z-index: 1111;
     box-sizing: content-box;
   }
   .top-box.data-v-92bb8f34 {
     margin-top: 48rpx;
     width: 690rpx;
   }
   .top-box .hot-title.data-v-92bb8f34 {
     width: 156rpx;
     height: 35rpx;
   }
   .feature.data-v-92bb8f34 {
     margin-top: 48rpx;
     flex-wrap: wrap;
     padding: 0 30rpx;
     box-sizing: border-box;
   }
   .feature .feature-title.data-v-92bb8f34 {
     font-size: 28rpx;
     font-weight: bold;
     color: #FFF;
   }
   .feature .price.data-v-92bb8f34 {
     font-weight: bold;
     font-size: 36rpx;
     color: #27ff92;
     position: absolute;
     bottom: 24rpx;
     left: 24rpx;
   }
   .feature .price .money.data-v-92bb8f34 {
     font-size: 28rpx;
   }
   .feature .feature-box.data-v-92bb8f34 {
     margin-bottom: 32rpx;
     width: 328rpx;
     background: #20202c;
     box-shadow: 0rpx 6rpx 35rpx 0rpx rgba(0, 0, 0, 0.1);
     border-radius: 16rpx;
     position: relative;
     overflow: hidden;
   }
   .feature .feature-box .label.data-v-92bb8f34 {
     position: absolute;
     top: 0;
     right: 0;
   }
   .feature .feature-box .label .lable-bg.data-v-92bb8f34 {
     width: 150rpx;
     height: 40rpx;
     z-index: 90;
   }
   .feature .feature-box .label .num.data-v-92bb8f34 {
     position: absolute;
     top: 45%;
     -webkit-transform: translate(0, -50%);
             transform: translate(0, -50%);
     right: 10rpx;
     z-index: 100;
     font-weight: 700;
     font-size: 20rpx;
     color: #000;
     padding: 0;
   }
   .feature .feature-box .hot-category.data-v-92bb8f34 {
     width: 328rpx;
     height: 328rpx;
   }
   .feature .feature-box .info.data-v-92bb8f34 {
     padding: 22rpx 24rpx 0;
     height: 190rpx;
   }
   .popup-one-box.data-v-92bb8f34 {
     padding: 0rpx 52rpx;
     width: 630rpx;
     height: 436rpx;
     background: #FFF;
     box-shadow: 0px 6rpx 14rpx 0px rgba(0, 0, 0, 0.16);
     border-radius: 20rpx;
   }
   .popup-one-box .pop-box-title.data-v-92bb8f34 {
     font-size: 32rpx;
     font-weight: bold;
     color: #333333;
     margin: 47rpx 0 67rpx;
   }
   .popup-one-box .popup-box-cancel.data-v-92bb8f34 {
     border: 2rpx solid #56A796;
     border-radius: 12rpx;
     font-size: 28rpx;
     font-weight: 500;
     color: #56A796;
     width: 378rpx;
     height: 72rpx;
   }
   .popup-one-box .popup-box-input.data-v-92bb8f34 {
     width: 100%;
     font-size: 28rpx;
     font-weight: 500;
     color: #333333;
     margin-bottom: 61rpx;
   }
   .popup-one-box .popup-box-input image.data-v-92bb8f34 {
     width: 44rpx;
     height: 44rpx;
   }
   .popup-one-box .popup-box-input .popup-box-input-server.data-v-92bb8f34 {
     margin-bottom: 36rpx;
   }
   .popup-one-box .popup-box-input .popup-box-input-server .popup-box-phone.data-v-92bb8f34 {
     color: #56A796;
     font-size: 28rpx;
     font-weight: 500;
   }
   
   page view {
     box-sizing: border-box;
     flex-shrink: 0;
     line-height: 1;
   }
   page {
     font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
       Arial, PingFang SC-Light, Microsoft YaHei;
     margin: 0;
   }
   .mb30{
   	position: relative;
   	margin-bottom: 30rpx;
   }
   .mb40{
   	position: relative;
   	margin-bottom: 40rpx;
   }
   .flex-col {
     display: flex;
     flex-direction: column;
   }
   .flex-row {
     display: flex;
     flex-direction: row;
   }
   .justify-start {
     display: flex;
     justify-content: flex-start;
   }
   .justify-center {
     display: flex;
     justify-content: center;
   }
   .justify-end {
     display: flex;
     justify-content: flex-end;
   }
   .justify-evenly {
     display: flex;
     justify-content: space-evenly;
   }
   .justify-around {
     display: flex;
     justify-content: space-around;
   }
   .justify-between {
     display: flex;
     justify-content: space-between;
   }
   .align-start {
     display: flex;
     align-items: flex-start;
   }
   .align-center {
     display: flex;
     align-items: center;
   }
   .align-end {
     display: flex;
     align-items: flex-end;
   }
   .flex-wrap{
   	flex-wrap: wrap;
   }
   
   @charset "UTF-8";
   /**
    * 这里是uni-app内置的常用样式变量
    *
    * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
    * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
    *
    */
   /**
    * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
    *
    * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
    */
   /* 颜色变量 */
   .border.data-v-24f04b66 {
     border: 1rpx solid red;
   }
   /* 行为相关颜色 */
   /* 文字基本颜色 */
   /* 背景颜色 */
   /* 边框颜色 */
   /* 尺寸变量 */
   /* 文字尺寸 */
   /* 图片尺寸 */
   /* Border Radius */
   /* 水平间距 */
   /* 垂直间距 */
   /* 透明度 */
   /* 文章场景相关 */
   .big-box.data-v-24f04b66 {
     background: #16161e;
   }
   .big-box .box_bg.data-v-24f04b66 {
     width: 100vw;
     height: 1200rpx;
     padding: 30rpx 30rpx 0;
     background: url();
     background-size: 100% 100%;
   }
   .big-box .box_bg .main-img.data-v-24f04b66 {
     border-radius: 32rpx;
     margin-top: 80rpx;
     width: 520rpx;
     height: 736rpx;
   }
   .big-box .bottom-btn.data-v-24f04b66 {
     width: 100%;
     height: 104rpx;
     border-radius: 8rpx;
     margin: 40rpx 0 60rpx;
     background: linear-gradient(112deg, #FFF4C9 0%, #F4DA8A 100%);
     color: #976c2f;
     font-weight: 700;
     font-size: 30rpx;
     position: relative;
   }
   .big-box .shadow.data-v-24f04b66 {
     position: absolute;
     left: 0;
     bottom: -.3125rem;
     width: 100%;
     height: .40625rem;
     background-color: #cdb363;
     border-radius: 0 0 8px 8px;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
     opacity: 1;
     z-index: 1;
   }
   .big-box .long-tips.data-v-24f04b66 {
     position: relative;
     margin: 64rpx 0 36rpx;
     color: #000;
     font-size: .6875rem;
     font-weight: 700;
     line-height: 1.0625rem;
     height: 1.625rem;
     border-radius: .25rem;
     padding-top: .25rem;
     padding-left: .75rem;
     padding-right: .5rem;
     padding-bottom: .25rem;
   }
   .big-box .long-tips .star-icon.data-v-24f04b66 {
     top: .25rem;
     left: .3125rem;
     width: .4375rem;
     height: .375rem;
     position: absolute;
   }
   .big-box .long-title.data-v-24f04b66 {
     color: #FFF;
     font-size: 40rpx;
     font-weight: 700;
   }
   .big-box .long-price.data-v-24f04b66 {
     color: #27ff92;
     font-size: 25rpx;
   }
   .big-box .long-price .price-num.data-v-24f04b66 {
     font-size: 40rpx;
     font-weight: 700;
   }
   .top-box.data-v-24f04b66 {
     margin-top: 80rpx;
     width: 690rpx;
   }
   .top-box .hot-title.data-v-24f04b66 {
     width: 170rpx;
     height: 40rpx;
   }
   .feature.data-v-24f04b66 {
     width: 100%;
     margin-top: 120rpx;
     flex-wrap: wrap;
     padding: 0 30rpx;
     box-sizing: border-box;
   }
   .feature .feature-box.data-v-24f04b66 {
     margin-bottom: 32rpx;
     width: 320rpx;
     height: 465rpx;
     background: #20202c;
     box-shadow: 0rpx 6rpx 35rpx 0rpx rgba(0, 0, 0, 0.1);
     border-radius: 16rpx;
     position: relative;
     background-size: 100% 100%;
   }
   .feature .feature-box .label.data-v-24f04b66 {
     -webkit-transform: translate(30rpx, -20rpx);
             transform: translate(30rpx, -20rpx);
   }
   .feature .feature-box .label .lable-bg.data-v-24f04b66 {
     width: 160rpx;
     height: 160rpx;
     z-index: 111;
   }
   .feature .feature-box .info.data-v-24f04b66 {
     padding: 10rpx 30rpx;
     color: #FFF;
   }
   .feature .feature-box .info .app-title.data-v-24f04b66 {
     font-size: 32rpx;
   }
   .feature .feature-box .info .app-content.data-v-24f04b66 {
     margin: 26rpx 0 40rpx;
     font-size: 22rpx;
   }
   .feature .feature-box .info .app-btn.data-v-24f04b66 {
     width: 256rpx;
     height: 76rpx;
     border-radius: 8rpx;
     font-size: 24rpx;
     background: #004ede;
   }
   .popup-one-box.data-v-24f04b66 {
     padding: 0rpx 52rpx;
     width: 630rpx;
     height: 436rpx;
     background: #FFF;
     box-shadow: 0px 6rpx 14rpx 0px rgba(0, 0, 0, 0.16);
     border-radius: 20rpx;
   }
   .popup-one-box .pop-box-title.data-v-24f04b66 {
     font-size: 32rpx;
     font-weight: bold;
     color: #333333;
     margin: 47rpx 0 67rpx;
   }
   .popup-one-box .popup-box-cancel.data-v-24f04b66 {
     border: 2rpx solid #56A796;
     border-radius: 12rpx;
     font-size: 28rpx;
     font-weight: 500;
     color: #56A796;
     width: 378rpx;
     height: 72rpx;
   }
   .popup-one-box .popup-box-input.data-v-24f04b66 {
     width: 100%;
     font-size: 28rpx;
     font-weight: 500;
     color: #333333;
     margin-bottom: 61rpx;
   }
   .popup-one-box .popup-box-input image.data-v-24f04b66 {
     width: 44rpx;
     height: 44rpx;
   }
   .popup-one-box .popup-box-input .popup-box-input-server.data-v-24f04b66 {
     margin-bottom: 36rpx;
   }
   .popup-one-box .popup-box-input .popup-box-input-server .popup-box-phone.data-v-24f04b66 {
     color: #56A796;
     font-size: 28rpx;
     font-weight: 500;
   }
   
   page view {
     box-sizing: border-box;
     flex-shrink: 0;
     line-height: 1;
   }
   page {
     font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
       Arial, PingFang SC-Light, Microsoft YaHei;
     margin: 0;
   }
   .mb30{
   	position: relative;
   	margin-bottom: 30rpx;
   }
   .mb40{
   	position: relative;
   	margin-bottom: 40rpx;
   }
   .flex-col {
     display: flex;
     flex-direction: column;
   }
   .flex-row {
     display: flex;
     flex-direction: row;
   }
   .justify-start {
     display: flex;
     justify-content: flex-start;
   }
   .justify-center {
     display: flex;
     justify-content: center;
   }
   .justify-end {
     display: flex;
     justify-content: flex-end;
   }
   .justify-evenly {
     display: flex;
     justify-content: space-evenly;
   }
   .justify-around {
     display: flex;
     justify-content: space-around;
   }
   .justify-between {
     display: flex;
     justify-content: space-between;
   }
   .align-start {
     display: flex;
     align-items: flex-start;
   }
   .align-center {
     display: flex;
     align-items: center;
   }
   .align-end {
     display: flex;
     align-items: flex-end;
   }
   .flex-wrap{
   	flex-wrap: wrap;
   }
   
   @charset "UTF-8";
   /**
    * 这里是uni-app内置的常用样式变量
    *
    * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
    * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
    *
    */
   /**
    * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
    *
    * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
    */
   /* 颜色变量 */
   .border.data-v-6a0a03a6 {
     border: 1rpx solid red;
   }
   /* 行为相关颜色 */
   /* 文字基本颜色 */
   /* 背景颜色 */
   /* 边框颜色 */
   /* 尺寸变量 */
   /* 文字尺寸 */
   /* 图片尺寸 */
   /* Border Radius */
   /* 水平间距 */
   /* 垂直间距 */
   /* 透明度 */
   /* 文章场景相关 */
   .big-box.data-v-6a0a03a6 {
     width: 100vw;
     min-height: calc(100vh);
     overflow: auto;
     background-size: 100% 100%;
   }
   @-webkit-keyframes slidein-data-v-6a0a03a6 {
   0% {
       -webkit-transform: translateY(-20%);
               transform: translateY(-20%);
       opacity: 1;
   }
   100% {
       -webkit-transform: translateY(-100%);
               transform: translateY(-100%);
       opacity: 0;
   }
   }
   @keyframes slidein-data-v-6a0a03a6 {
   0% {
       -webkit-transform: translateY(-20%);
               transform: translateY(-20%);
       opacity: 1;
   }
   100% {
       -webkit-transform: translateY(-100%);
               transform: translateY(-100%);
       opacity: 0;
   }
   }
   .big-box .map1-box.data-v-6a0a03a6 {
     margin-top: 80rpx;
     position: relative;
   }
   .big-box .map1-box .path.data-v-6a0a03a6 {
     position: absolute;
     width: 400rpx;
     height: 980rpx;
     z-index: 100;
   }
   .big-box .map1-box .min-long-box.data-v-6a0a03a6 {
     position: absolute;
     top: -74rpx;
     left: -40rpx;
     z-index: 101;
   }
   .big-box .map1-box .min-long-box .nickname.data-v-6a0a03a6 {
     font-weight: bold;
     font-size: 26rpx;
     color: #FFF;
   }
   .big-box .map1-box .min-long-box .efficiency.data-v-6a0a03a6 {
     position: absolute;
     top: -10rpx;
     font-weight: bold;
     font-size: 22rpx;
     color: #FFF;
     -webkit-animation-duration: 1s;
             animation-duration: 1s;
     -webkit-animation-name: slidein-data-v-6a0a03a6;
             animation-name: slidein-data-v-6a0a03a6;
     -webkit-animation-iteration-count: infinite;
             animation-iteration-count: infinite;
   }
   .big-box .map1-box .min-long.data-v-6a0a03a6 {
     margin-top: 10rpx;
     width: 90rpx;
   }
   .big-box .map1-box .map-tips.data-v-6a0a03a6 {
     white-space: nowrap;
     background: rgba(28, 31, 38, 0.8);
     color: rgba(255, 255, 255, 0.8);
     border-radius: 8rpx;
     padding: 14rpx 30rpx;
     font-size: 12px;
     font-weight: 300;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
   }
   .big-box .map1-box .map1.data-v-6a0a03a6 {
     width: 400rpx;
     height: 980rpx;
   }
   .big-box .top-crystal.data-v-6a0a03a6 {
     width: 100%;
     padding: 60rpx 70rpx 0;
   }
   .big-box .top-crystal .crystal-box.data-v-6a0a03a6 {
     width: 252rpx;
     height: 60rpx;
     position: relative;
   }
   .big-box .top-crystal .crystal-box .my-num.data-v-6a0a03a6 {
     position: absolute;
     top: 16rpx;
     left: 60rpx;
     font-size: 0.875rem;
     font-weight: 700;
     color: white;
     z-index: 101;
   }
   .big-box .top-crystal .crystal-box .my-num .gather-select.data-v-6a0a03a6 {
     padding: 25rpx 0;
     font-size: 26rpx;
   }
   .big-box .top-crystal .crystal-box .my-num .xiala.data-v-6a0a03a6 {
     margin-left: 10rpx;
     width: 22rpx;
   }
   .big-box .top-crystal .crystal-box .my-num .select-box.data-v-6a0a03a6 {
     padding: 24rpx 0;
     position: absolute;
     border-radius: 8rpx;
     top: 60rpx;
     left: 0;
     width: 4.25rem;
     background-color: #36394a;
     z-index: 9;
   }
   .big-box .top-crystal .crystal-box .my-num .select-box.data-v-6a0a03a6::before {
     content: '';
     position: absolute;
     top: -20rpx;
     right: 30rpx;
     width: 0;
     height: 0;
     border-top: .3125rem solid transparent;
     border-right: .3125rem solid transparent;
     border-left: .3125rem solid transparent;
     border-bottom: .3125rem solid #36394a;
   }
   .big-box .top-crystal .my-crystal.data-v-6a0a03a6 {
     -webkit-transform: translate(-40%, 0);
             transform: translate(-40%, 0);
     width: 86rpx;
     height: 86rpx;
   }
   .big-box .top-crystal3.data-v-6a0a03a6 {
     width: 100%;
     padding: 80rpx 70rpx 0;
   }
   .big-box .top-crystal3 .crystal-box3.data-v-6a0a03a6 {
     width: 300rpx;
     height: 60rpx;
     position: relative;
   }
   .big-box .top-crystal3 .crystal-box3 .my-num3.data-v-6a0a03a6 {
     position: absolute;
     top: 16rpx;
     left: 70rpx;
     font-size: 0.875rem;
     color: white;
   }
   .big-box .top-crystal3 .crystal-box3 .my-num3 .xiala.data-v-6a0a03a6 {
     margin-left: 30rpx;
     width: 22rpx;
   }
   .big-box .top-crystal3 .crystal-box-r3.data-v-6a0a03a6 {
     width: 6.4375rem;
     height: 60rpx;
     color: #9d5200;
     position: relative;
     background-color: #ca8200;
     border-radius: 3.75rem;
     box-shadow: 1px 2px 0 0 #ca8200;
   }
   .big-box .top-crystal3 .crystal-box-r3.data-v-6a0a03a6::before {
     content: "";
     position: absolute;
     z-index: 1;
     top: -.125rem;
     left: 0;
     width: 100%;
     height: 1.9375rem;
     border-radius: 3.75rem;
     background: linear-gradient(180deg, #fec777 0%, #ffa500 100%);
     box-shadow: inset -0.125rem -0.0625rem 0.0625rem #f5be22, inset 0 0.1875rem 0.1875rem #ffed62;
   }
   .big-box .top-crystal3 .crystal-box-r3 .my-num-r3.data-v-6a0a03a6 {
     border-radius: 3.75rem;
     font-size: .75rem;
     font-weight: 700;
     z-index: 1;
   }
   .big-box .top-crystal3 .crystal-box-r3 .my-num-r3.data-v-6a0a03a6::before {
     content: "";
     position: absolute;
     z-index: 1;
     top: -.0625rem;
     left: .4375rem;
     width: 6rem;
     height: 1.8125rem;
     border-radius: 3.75rem;
     background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
     box-shadow: 0 0 0.03125rem 0.03125rem rgba(255, 255, 255, 0.07);
     opacity: .5;
   }
   .big-box .top-crystal3 .crystal-box-r3 .my-num-r3 .xiala.data-v-6a0a03a6 {
     margin-left: 30rpx;
     width: 22rpx;
   }
   .big-box .top-crystal3 .my-crystal-l-3.data-v-6a0a03a6 {
     -webkit-transform: translate(-40%, 0);
             transform: translate(-40%, 0);
     width: 90rpx;
     height: 90rpx;
   }
   .big-box .top-crystal3 .my-crystal-r-3.data-v-6a0a03a6 {
     z-index: 1;
     margin-right: 10rpx;
     width: 30rpx;
     height: 30rpx;
   }
   .big-box .left-slot.data-v-6a0a03a6 {
     text-indent: 1em;
     font-size: 36rpx;
     font-weight: 500;
     color: #FFF;
   }
   .big-box .bottom-btn.data-v-6a0a03a6 {
     border-radius: 8rpx;
     margin: 40rpx 0 60rpx;
     font-weight: 700;
     font-size: 30rpx;
     position: relative;
     z-index: 102;
     position: fixed;
     bottom: 100rpx;
     width: 16.4375rem;
     height: 2.78125rem;
     color: #be6300;
     line-height: 2.78125rem;
     background: linear-gradient(180deg, #fec777 0%, #ffa500 100%);
   }
   .big-box .shadow.data-v-6a0a03a6 {
     position: absolute;
     left: 0;
     bottom: -.3125rem;
     width: 100%;
     height: .40625rem;
     background-color: #855500;
     border-radius: 0 0 8px 8px;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
     opacity: 1;
     z-index: 1;
   }
   .big-box .fixed-l.data-v-6a0a03a6 {
     top: 35vh;
     position: fixed;
     left: 30rpx;
   }
   .big-box .fixed-l .fixed-l-box.data-v-6a0a03a6 {
     height: 350rpx;
   }
   .big-box .fixed-r.data-v-6a0a03a6 {
     top: 22vh;
     position: fixed;
     right: 30rpx;
   }
   .big-box .fixed-r .fixed-r-box.data-v-6a0a03a6 {
     color: #FFF;
     font-size: .625rem;
   }
   .big-box .fixed-r .fixed-r-box .btn-star-num.data-v-6a0a03a6 {
     position: absolute;
     top: 45%;
     -webkit-transform: translate(0, -100%);
             transform: translate(0, -100%);
     font-size: 0.625rem;
     font-weight: normal;
     color: #23591e;
   }
   .big-box .btn-l.data-v-6a0a03a6 {
     width: 128rpx;
   }
   .big-box .btn-r.data-v-6a0a03a6 {
     width: 100rpx;
   }
   .minus.data-v-6a0a03a6 {
     width: 22px;
     height: 22px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
   .input.data-v-6a0a03a6 {
     padding: 0 10px;
   }
   .plus.data-v-6a0a03a6 {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   page view {
     box-sizing: border-box;
     flex-shrink: 0;
     line-height: 1;
   }
   page {
     font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
       Arial, PingFang SC-Light, Microsoft YaHei;
     margin: 0;
   }
   .mb30{
   	position: relative;
   	margin-bottom: 30rpx;
   }
   .mb40{
   	position: relative;
   	margin-bottom: 40rpx;
   }
   .flex-col {
     display: flex;
     flex-direction: column;
   }
   .flex-row {
     display: flex;
     flex-direction: row;
   }
   .justify-start {
     display: flex;
     justify-content: flex-start;
   }
   .justify-center {
     display: flex;
     justify-content: center;
   }
   .justify-end {
     display: flex;
     justify-content: flex-end;
   }
   .justify-evenly {
     display: flex;
     justify-content: space-evenly;
   }
   .justify-around {
     display: flex;
     justify-content: space-around;
   }
   .justify-between {
     display: flex;
     justify-content: space-between;
   }
   .align-start {
     display: flex;
     align-items: flex-start;
   }
   .align-center {
     display: flex;
     align-items: center;
   }
   .align-end {
     display: flex;
     align-items: flex-end;
   }
   .flex-wrap{
   	flex-wrap: wrap;
   }
   
   @charset "UTF-8";
   /**
    * 这里是uni-app内置的常用样式变量
    *
    * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
    * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
    *
    */
   /**
    * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
    *
    * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
    */
   /* 颜色变量 */
   .border.data-v-dcbcfe34 {
     border: 1rpx solid red;
   }
   /* 行为相关颜色 */
   /* 文字基本颜色 */
   /* 背景颜色 */
   /* 边框颜色 */
   /* 尺寸变量 */
   /* 文字尺寸 */
   /* 图片尺寸 */
   /* Border Radius */
   /* 水平间距 */
   /* 垂直间距 */
   /* 透明度 */
   /* 文章场景相关 */
   .big-box.data-v-dcbcfe34 {
     background: url(/static/images/mine/my_bg.png) #16161e no-repeat top center/100% 668rpx;
     padding: 0 32rpx 60rpx;
   }
   .big-box .center-slot.data-v-dcbcfe34 {
     width: 48rpx;
     height: 48rpx;
   }
   .big-box .menu-box.data-v-dcbcfe34 {
     margin-top: 46rpx;
     width: calc(100vw - 64rpx);
     position: relative;
     color: #fff;
     border-radius: .5rem;
     z-index: 2;
     color: #fff;
   }
   .big-box .menu-box .jiantou.data-v-dcbcfe34 {
     width: 35rpx;
     height: 35rpx;
   }
   .big-box .menu-box .my-long.data-v-dcbcfe34 {
     margin-right: 32rpx;
     border-radius: 16rpx;
     width: 120rpx;
     height: 120rpx;
   }
   .big-box .menu-box .long-kuang-num.data-v-dcbcfe34 {
     font-size: 40rpx;
     font-weight: 700;
     color: #fff;
   }
   .big-box .menu-box .my-long-kuang.data-v-dcbcfe34 {
     margin-top: 25rpx;
     color: rgba(255, 255, 255, 0.6);
     font-weight: 300;
     font-size: 26rpx;
   }
   .big-box .menu-box .my-long-kuang .copy-icon.data-v-dcbcfe34 {
     width: 32rpx;
     height: 32rpx;
     margin-left: 5rpx;
   }
   .egg-crystal.data-v-dcbcfe34 {
     width: 100%;
     height: 184rpx;
     background-color: #20202c;
     padding: 0 0 0 32rpx;
     background: url() no-repeat center center/100% 100%;
     margin-bottom: 24rpx;
   }
   .egg-crystal .egg-crystal-box.data-v-dcbcfe34 {
     flex: 1;
   }
   .egg-crystal .egg-crystal-box1.data-v-dcbcfe34 {
     flex: 1;
     padding-left: 52rpx;
   }
   .egg-crystal .my-long-dan.data-v-dcbcfe34 {
     color: #FFFFFF99;
     font-size: 24rpx;
   }
   .egg-crystal .dan-num.data-v-dcbcfe34 {
     margin-top: 28rpx;
     font-size: 44rpx;
     color: #FFF;
   }
   .egg-crystal .unit.data-v-dcbcfe34 {
     margin-left: 15rpx;
     font-size: 24rpx;
     color: #FFFFFF99;
   }
   .top-box.data-v-dcbcfe34 {
     width: 100%;
     position: relative;
     margin: 76rpx auto 26rpx;
     padding: 26rpx 32rpx;
     background-color: #20202c;
     border-radius: 16rpx;
   }
   .top-box .long-baby.data-v-dcbcfe34 {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 232rpx;
     height: 232rpx;
   }
   .top-box .my-qing-long.data-v-dcbcfe34 {
     color: #FFFFFF99;
     font-size: 24rpx;
   }
   .top-box .long-num.data-v-dcbcfe34 {
     margin-top: 20rpx;
     font-size: 64rpx;
     color: #27ff92;
   }
   .top-box .long-num .unit.data-v-dcbcfe34 {
     margin-left: 15rpx;
     font-size: 24rpx;
     color: #FFFFFF99;
   }
   .feature-app.data-v-dcbcfe34 {
     height: 400rpx;
     width: 100%;
     padding: 46rpx 32rpx 0;
     margin-bottom: 24rpx;
     box-sizing: border-box;
     background-color: #20202c;
     border-radius: 16rpx;
   }
   .feature-app .set-name.data-v-dcbcfe34 {
     font-size: 28rpx;
     color: #FFF;
   }
   .feature-app .jiantou.data-v-dcbcfe34 {
     width: 30rpx;
     height: 30rpx;
   }
   .feature-app .feature-box-app.data-v-dcbcfe34 {
     margin: 32rpx 0 32rpx;
     width: 155rpx;
   }
   .feature-app .feature-box-app .open-map-icon.data-v-dcbcfe34 {
     width: 48rpx;
     height: 48rpx;
     margin-bottom: 22rpx;
   }
   .feature-app .feature-box-app .title-order.data-v-dcbcfe34 {
     font-size: 24rpx;
     color: #FFFFFFCC;
   }
   .feature.data-v-dcbcfe34 {
     width: 100%;
     height: 260rpx;
     padding: 46rpx 32rpx 0;
     margin-bottom: 24rpx;
     box-sizing: border-box;
     background-color: #20202c;
     border-radius: 16rpx;
   }
   .feature .set-name.data-v-dcbcfe34 {
     font-size: 28rpx;
     color: #FFF;
   }
   .feature .jiantou.data-v-dcbcfe34 {
     width: 30rpx;
     height: 30rpx;
   }
   .feature .feature-box-app.data-v-dcbcfe34 {
     margin-top: 32rpx;
     width: 155rpx;
   }
   .feature .feature-box-app .open-map-icon.data-v-dcbcfe34 {
     width: 48rpx;
     height: 48rpx;
     margin-bottom: 22rpx;
   }
   .feature .feature-box-app .title-order.data-v-dcbcfe34 {
     font-size: 24rpx;
     color: #FFFFFFCC;
   }
   .feature .feature-box.data-v-dcbcfe34 {
     flex: 1;
     margin-top: 32rpx;
   }
   .feature .feature-box .open-map-icon.data-v-dcbcfe34 {
     width: 48rpx;
     height: 48rpx;
     margin-bottom: 22rpx;
   }
   .feature .feature-box .title-order.data-v-dcbcfe34 {
     font-size: 24rpx;
     color: #FFFFFFCC;
   }
   .popup-one-box.data-v-dcbcfe34 {
     position: relative;
     z-index: 7;
     width: 560rpx;
     border-radius: 16rpx;
     background: linear-gradient(181deg, rgba(35, 52, 73, 0.94) 20%, #181922 100%);
     padding: 90rpx 40rpx 40rpx;
   }
   .popup-one-box .has-shuijing.data-v-dcbcfe34 {
     width: 100%;
     height: 44rpx;
     font-size: 28rpx;
     color: #FFFFFF99;
     margin-bottom: 24rpx;
   }
   .popup-one-box .shui-ji-num.data-v-dcbcfe34 {
     font-size: 28rpx;
     color: #FFF;
     font-weight: 700;
   }
   .popup-one-box .popup-box-btn.data-v-dcbcfe34 {
     width: 480rpx;
     height: 90rpx;
     background: #8e929b;
     color: #202426;
     font-size: 30rpx;
     border-radius: 8rpx;
     font-weight: 700;
   }
   .popup-one-box .popup-box-cancel.data-v-dcbcfe34 {
     position: absolute;
     left: 50%;
     -webkit-transform: translate(-50%, 0);
             transform: translate(-50%, 0);
     bottom: -120rpx;
   }
   .popup-one-box .close-popup.data-v-dcbcfe34 {
     width: 48rpx;
     height: 48rpx;
   }
   .popup-one-box .popup-kuangshi.data-v-dcbcfe34 {
     width: 56rpx;
     height: 36rpx;
   }
   .popup-one-box .need-kuang.data-v-dcbcfe34 {
     width: 480rpx;
     height: 120rpx;
     background: rgba(46, 70, 86, 0.41);
     border-radius: 8rpx;
     padding: 0 20rpx;
     margin-bottom: 40rpx;
   }
   .popup-one-box .need-kuang .need-shuijing.data-v-dcbcfe34 {
     font-size: 22rpx;
     color: #FFFFFF99;
   }
   .popup-one-box .need-kuang .need-shuijing-num.data-v-dcbcfe34 {
     font-size: 28rpx;
     font-weight: 700;
     color: #FFF;
   }
   .popup-one-box .popup-top-bg.data-v-dcbcfe34 {
     position: absolute;
     width: 100%;
     left: 0;
     top: 0;
     right: 0;
     z-index: -1;
     height: 108rpx;
   }
   .popup-one-box .popup-top-gaoji.data-v-dcbcfe34 {
     position: absolute;
     top: 40rpx;
     right: 30rpx;
   }
   .popup-one-box .popup-top-gaoji .gao-ji.data-v-dcbcfe34 {
     width: 156rpx;
     height: 35rpx;
   }
   
   @charset "UTF-8";
   /**
    * 这里是uni-app内置的常用样式变量
    *
    * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
    * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
    *
    */
   /**
    * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
    *
    * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
    */
   /* 颜色变量 */
   .border.data-v-57280228 {
     border: 1rpx solid red;
   }
   /* 行为相关颜色 */
   /* 文字基本颜色 */
   /* 背景颜色 */
   /* 边框颜色 */
   /* 尺寸变量 */
   /* 文字尺寸 */
   /* 图片尺寸 */
   /* Border Radius */
   /* 水平间距 */
   /* 垂直间距 */
   /* 透明度 */
   /* 文章场景相关 */
   .tabbar-page.data-v-57280228 {
     min-height: 100vh;
     background-color: #181922;
   }
   .occupi.data-v-57280228 {
     background-color: #181922;
     width: 750rpx;
     min-height: 120rpx;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
   .tabbar.data-v-57280228 {
     position: fixed;
     left: 0rpx;
     bottom: 0rpx;
     width: 750rpx;
     min-height: 120rpx;
     display: flex;
     justify-content: space-around;
     align-items: center;
     background-color: #181922;
     font-size: 22rpx;
     color: rgba(255, 255, 255, 0.8);
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
     z-index: 103;
   }
   .tabbar view.data-v-57280228 {
     width: 150rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   .tabbar view image.data-v-57280228 {
     width: 60rpx;
     height: 60rpx;
     margin-bottom: 16rpx;
   }
   .tabbar .tabcli.data-v-57280228 {
     color: #27ff92;
   }
   .tabbar .tabbar-icon.data-v-57280228 {
     width: 40rpx;
     height: 40rpx;
   }
   .tabbar .animation.data-v-57280228 {
     -webkit-animation: ada-data-v-57280228 .7s;
             animation: ada-data-v-57280228 .7s;
   }
   @-webkit-keyframes ada-data-v-57280228 {
   0% {
       opacity: 0;
       -webkit-transform: translateY(0.9375rem);
               transform: translateY(0.9375rem);
   }
   100% {
       opacity: 1;
       -webkit-transform: translateY(0);
               transform: translateY(0);
   }
   }
   @keyframes ada-data-v-57280228 {
   0% {
       opacity: 0;
       -webkit-transform: translateY(0.9375rem);
               transform: translateY(0.9375rem);
   }
   100% {
       opacity: 1;
       -webkit-transform: translateY(0);
               transform: translateY(0);
   }
   }
   

	.sk-transparent {
	    color: transparent !important;
	  }
	.sk-image {
	    background: #21202E !important;
	  }
	.sk-container {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	    background-color: transparent;
	  }

</style>